<template>
    <ul class="cardList self_scroll">
      <li v-for="item in cfList" :key="item.cf_id" class="fl">
        <cf-card
          :cf_code="item.cf_code"
          :cf_start_time="item.cf_start_time"
          :cf_end_time="item.cf_end_time"
          :cf_host_name="item.cf_host_name"
          :cf_plan_participant_number="item.cf_plan_participant_number"
          :cf_lock="item.cf_lock"
          :cf_name="item.cf_name"
          :cf_state="item.cf_state"
          :cf_id="item.cf_id"
          :cf_sponsor="item.cf_sponsor"
        ></cf-card>
      </li>
    </ul>
</template>

<script>
import cfCard from './cfCard'

export default {
  components: {
    cfCard
  },
  computed: {
    cfList () {
      return this.$store.state.conference.agendaCfData.agendaCfList
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.$store.dispatch('conference/getToDoMeetingList')
    }
  }
}
</script>

<style lang="scss" scoped>
  ul.cardList {
    height: calc(100% - 80px);
    width: 100%;
    padding: 0 20px 0 24px;
    li{
      margin-right: 30px;
      margin-bottom: 30px;
      &:nth-child(4n){
        margin-right: 0;
      }
    }
  }
</style>
